<template>
  <div class="tabbars">
    <div class="container">
      <transition name="fade" mode="out-in">
        <router-view />
      </transition>
    </div>

    <div class='tabbar'>
      <van-tabbar v-model="active" fixed route>
        <van-tabbar-item v-for="(item, index) in tabbarItem" :key="index" :to="{ name: item.route }">
          <span>{{item.name}}</span>
          <template #icon="props">
            <img :src="props.active ? item.inactive : item.active" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      active: 0,
      tabbarItem: [
        { name: '首页', route: 'home', active: require('@/assets/img/tabbar/home.png'), inactive: require('@/assets/img/tabbar/home_active.png'), },
        { name: '服务', route: 'Housekeeping', active: require('@/assets/img/tabbar/Housekeeping.png'), inactive: require('@/assets/img/tabbar/Housekeeping_active.png'), },
        { name: '商品', route: 'category', active: require('@/assets/img/tabbar/category.png'), inactive: require('@/assets/img/tabbar/category_active.png'), },
        { name: '购物车', route: 'cart', active: require('@/assets/img/tabbar/cart.png'), inactive: require('@/assets/img/tabbar/cart_active.png'), },
        { name: '我的', route: 'my', active: require('@/assets/img/tabbar/my.png'), inactive: require('@/assets/img/tabbar/my_active.png'), },
      ],
    }
  },
  created () {

  },
  methods: {

  },
}
</script>

<style scoped lang='less'>
.tabbars {
  background: #f7f4f8;
  .container {
    min-height: calc(100vh - 50px);
    padding-bottom: 50px;
  }
  .tabbar {
    position: fixed;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 50px;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
